<template>
  <div class="xzJgs">
    <div id="echartsXzJgs" />
  </div>
</template>

<script>
import Sever from '@/api/selfApi'
export default {
  props: {
    depCode: {
      type: String
    }
  },
  data() {
    return {
      echartsXzJgs: null,
      options: { JGSUM: 0, DWJGS: 0, ZFJGS: 0, QTJGS: 0 }
    }
  },
  watch: {
    depCode(newValue, oldValue) {
      this.initData()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    array2obj(array, key) {
      const resObj = {}
      for (let i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i]
      }
      return resObj
    },
    async initData() {
      //请求后台返回数据
      try {
        //请求后台接口
        const res = await Sever.map.getXzjgs({
          dep_code: this.depCode
        })
        console.log(res)
        //赋值给变量
        this.options = res
      } catch (error) {
        console.log(error)
      }
      var _this = this
      var seriesdata = [
        { name: '党委机构', value: this.options.DWJGS },
        { name: '政府机构', value: this.options.ZFJGS },
        { name: '群众团体', value: this.options.QTJGS }
      ]
      var colorList = [
        '#407AFB',
        '#44aff0',
        '#FFC653',
        '#FF6519',
        '#EE3939',
        '#FFAFDA',
        '#00FFFF'
      ]
      var option = {
        tooltip: { show: true },
        title: {
          text: '{b|合计：}',
          left: '33%',
          top: '10%',
          textAlign: 'left',
          textStyle: {
            fontWeight: 'normal',
            fontSize: '20',
            color: '#FFFFFF',
            textAlign: 'left',
            rich: {
              a: {
                fontSize: '20',
                fontWeight: 'bold',
                backgroundColor: 'rgba(56,89,255,0.2)',
                borderColor: 'rgba(56,211,255,1)',
                borderWidth: 1,
                padding: [6, 6, 6, 6],
                shadowColor: 'rgba(56,211,255,1)',
                shadowBlur: 3,
                borderRadius: 3
              },
              b: {
                fontSize: '22',
                fontWeight: 'bold',
                padding: [6, 6, 6, 6],
                color: '#FFFFFF'
              }
            }
          }
        },
        legend: {
          show: true,
          // icon: 'circle',
          orient: 'vertical',
          top: '40%',
          left: '35%',
          itemGap: 15,
          itemWidth: 15,
          itemHeight: 15,
          data: '',
          formatter: function (name) {
            return (
              '{a|' +
              '    ' +
              name +
              '}{b|' +
              _this.array2obj(seriesdata, 'name')[name].value.toFixed(0) +
              '个}{c|' +
              Number(
                (_this.array2obj(seriesdata, 'name')[name].value.toFixed(0) /
                  _this.options.JGSUM) *
                  100
              )
                .toFixed(1)
                .toLocaleString() +
              '%}'
            )
          },
          textStyle: {
            rich: {
              a: {
                align: 'center',
                fontSize: 14,
                fontWeight: '600',
                color: 'rgba(255,255,255,1)',
                width: 20,
                // fontWeight: 600,
                padding: [0, 0, 0, 15]
              },
              b: {
                align: 'center',
                fontSize: 14,
                color: 'rgba(255,255,255,1)',
                width: 5,
                // fontWeight: 600,
                padding: [0, 0, 0, 80]
              },
              c: {
                align: 'center',
                fontSize: 14,
                color: 'rgba(255,255,255,1)',
                width: 5,
                // fontWeight: 600,
                padding: [0, 0, 0, 60]
              }
            }
          }
        },
        series: {
          type: 'pie',
          center: ['18%', '50%'],
          radius: ['35%', '65%'],
          clockwise: true,
          // startAngle: 50,
          avoidLabelOverlap: true,
          hoverOffset: 15,
          itemStyle: {
            normal: {
              color: function (params) {
                return colorList[params.dataIndex]
              }
            }
          },
          label: {
            show: false,
            position: 'outside',
            formatter: function (data) {
              // console.log('data',data)
              return (
                '\n{icon|}\n' +
                '{name|' +
                data.name +
                '}' +
                ' {value|' +
                data.value.toFixed(0) +
                ' ,' +
                data.percent.toFixed(0) +
                '%}'
              )
            },
            // padding: [-40, -90, -20, -80],
            rich: {
              icon: {
                height: 5,
                width: 5,
                lineHeight: 5,
                // marginBottom: 10,
                padding: [0, -5],
                borderRadius: 5,
                backgroundColor: 't' // 圆点颜色和饼图块状颜色一致
              },
              name: {
                fontSize: 14,
                padding: [20, 100, -20, -90],
                color: '#ffffff'
              },
              value: {
                fontSize: 14,
                padding: [20, -90, -20, -100],
                color: '#ffffff'
              }
            }
          },
          labelLine: {
            show: false,
            normal: {
              length: 10,
              length2: 80,
              align: 'right',
              lineStyle: {
                width: 1
              }
            }
          },
          data: '',
          seriesIndex: 0
        }
      }

      // 将合计值转换为数组
      const arr = this.options.JGSUM.toString().split('')
      let m = ''

      for (let i = 0; i < arr.length; i++) {
        m += '{a|' + arr[i] + '}'
        if (i != arr.length - 1) {
          m += '  '
        }
      }
      option.title.text = '{b|行政机关：}' + m
      option.legend.data = seriesdata
      option.series.data = seriesdata
      // 基于准备好的dom，初始化echarts实例
      this.echartsXzJgs = this.$echarts.init(
        document.getElementById('echartsXzJgs')
      )
      option && this.echartsXzJgs.setOption(option)
      window.addEventListener('resize', () => this.echartsXzJgs.resize(), false)
    }
  }
}
</script>

<style lang='scss'>
.xzJgs {
  width: 100%;
  height: 21.5%;
  margin-top: 1%;
  background-color: rgba(1, 35, 102, 0.9);

  #echartsXzJgs {
    width: 100%;
    height: 100%;
    text-align: center;
    font-family: electronicFont;
    font-size: 30px;
  }
}
</style>
